<template>
  <view>
    <view v-if="show" class="calendar-all">
      <van-button
        class="calendar-button"
        type="default"
        size="small"
        @click="$refs.calendar.reset()"
        >回到今天</van-button
      >
      <!-- 日历组件 -->
      <van-calendar
        ref="calendar"
        :show-title="false"
        :poppable="false"
        :min-date="minDate"
        :max-date="maxDate"
        color="#ff2d4a"
        :show-confirm="false"
        :formatter="formatter"
        class="calendar"
      />
    </view>
    <!-- 骨架屏 -->
    <van-skeleton title v-else row="5"> </van-skeleton>
  </view>
</template>

<script>
import mixin from "@/mixins/mixins.js";
import Calendar from '../../utils/calendar'
export default {
  name: 'Calendar',
  mixins: [mixin],
  data() {
    return {
      minDate: new Date(2020, 0, 1).getTime(),
      maxDate: new Date(2030, 11, 31).getTime(),
      show: false
    }
  },
  created() {
    setTimeout(() => {
      this.show = true
    }, 100)
  },
  methods: {
    // Vant日历日期添加法定节假日以及24节气
    formatter(day) {
      const time = new Date(day.date)
      const y = time.getFullYear()
      const m = time.getMonth() + 1
      const d = time.getDate()
      const w = time.getDay()
      const info = Calendar.solar2lunar(y, m, d)
      //   改变周六周日显示颜色
      if (w === 0 || w === 6) {
        day.className = 'weekendRed'
        day.topInfo = '休'
      }

      //   优先级:节日>节气>农历
      if (info.festival != null && info.festival != '') {
        day.bottomInfo = info.festival
      } else if (info.Term != null && info.Term != '') {
        day.bottomInfo = info.Term
      } else if (info.IDayCn != null && info.IDayCn != '') {
        // 去掉闰
        // if (info.IMonthCn.includes('闰')) {
        //   day.bottomInfo = info.IMonthCn.split('闰')[1] + info.IDayCn
        // }else {
        //   day.bottomInfo = info.IMonthCn + info.IDayCn
        // }
        day.bottomInfo = info.IMonthCn + info.IDayCn
      }
      // 农历节日
      if (info.IMonthCn + info.IDayCn === '腊月三十') {
        day.bottomInfo = '除夕'
      } else if (info.IMonthCn + info.IDayCn === '正月初一') {
        day.bottomInfo = '春节'
      } else if (info.IMonthCn + info.IDayCn === '正月十五') {
        day.bottomInfo = '元宵节'
      } else if (info.IMonthCn + info.IDayCn === '五月初五') {
        day.bottomInfo = '端午节'
      } else if (info.IMonthCn + info.IDayCn === '八月十五') {
        day.bottomInfo = '中秋节'
      } else if (info.IMonthCn + info.IDayCn === '九月初九') {
        day.bottomInfo = '重阳节'
      }

      return day
    },

  }
}
</script>

<style lang="scss" scoped>
// 骨架屏相关样式
::v-deep.van-skeleton__content {
  position: relative;
}
::v-deep .van-skeleton__title {
  position: absolute;
  top: 0;
  left: 220rpx;
}
::v-deep .van-skeleton__row {
  // position: absolute;
  // top: 20rpx;
  // left: 0;
  margin-top: 80rpx !important;
  margin-bottom: 80rpx;
  height: 200rpx;
}
// 周末颜色
::v-deep .weekendRed {
  background-color: #f5f5f5c0;
}
// 每一个日期的样式
::v-deep .van-calendar__day {
  position: relative;
}
::v-deep .van-calendar__top-info {
  width: 36rpx;
  height: 36rpx;
  position: absolute;
  top: 44rpx;
  left: 70rpx;
  text-align: center;
  line-height: 36rpx;
  font-size: 24rpx;
  background-color: #ff7275;
  color: #fff;
  border-radius: 50%;
}
.calendar {
  --calendar-height: 1500rpx;
}
.calendar-all {
  position: relative;

  .calendar-button {
    position: absolute;
    top: 20rpx;
    right: 100rpx;
  }
}
</style>
